<template>
  <div id="personal-team">
    <NavBar title="我的团队" left-arrow @click-left="onClickLeft" />
    <div class="team-box">
      <Form @submit="onSubmit">
        <div class="selecttime">
          <div
            class="selectfrontbox"
            :selectfront="selectfront"
            @click="showPicker = true"
            name="时间前"
          >
            {{ selectfront }}
          </div>
          <Popup v-model="showPicker" position="bottom">
            <DatetimePicker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onConfirmfront"
            />
          </Popup>

          <div class="selectto">-</div>

          <div
            class="selectbehindbox"
            :selectbehind="selectbehind"
            @click="showPicker2 = true"
            name="时间后"
          >
            {{ selectbehind }}
          </div>
          <Popup v-model="showPicker2" position="bottom">
            <DatetimePicker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onConfirmfront2"
            />
          </Popup>
          <!-- <div class="search" >搜索</div> -->
          <div class="search" @click="onSubmit">搜索</div>
        </div>
      </Form>
      <div class="select">
        <div class="select-left">
          <div class="select-money">
            <div>团队总流水</div>
            <div>- -</div>
          </div>
          <div class="select-first">
            <div>首充人数</div>
            <div>- -</div>
          </div>
          <div class="select-people">
            <div>团队人数</div>
            <div>- -</div>
          </div>
        </div>
        <div class="select-right">
          <div class="select-commission">
            <div>累计佣金</div>
            <div>- -</div>
          </div>
          <div class="select-direct">
            <div>直推人数</div>
            <div>- -</div>
          </div>
          <div class="select-today">
            <div>今日交易人数</div>
            <div>- -</div>
          </div>
        </div>
      </div>
      <div class="segmentation"></div>
      <Tabs v-model="active">
        <Tab title="一级()">内容 1</Tab>
        <Tab title="二级()">内容 2</Tab>
        <Tab title="三级()">内容 3</Tab>
      </Tabs>
    </div>
  </div>
</template>
<script>
import {
  NavBar,
  Form,
  Popup,
  Picker,
  DatetimePicker,
  Button,
  Tabs,
  Tab,
} from "vant";
export default {
  components: {
    NavBar,
    Form,
    Popup,
    Picker,
    DatetimePicker,
    Button,
    Tabs,
    Tab,
  },

  data() {
    return {
      selectfront: "", // 选择时间（前）
      selectbehind: "", // 选择时间（后）
      showPicker: false, // 时间选择
      showPicker2: false, //
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      currentDatebehind: new Date(2021, 0, 17), //（后）
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 搜索
    onSubmit() {
      console.log(this.selectfront);
      console.log(this.selectbehind);
    },

    // 时间选择（前）
    onConfirmfront(time) {
      time = new Date(time);
      let date =
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
      this.selectfront = date;
      this.showPicker = false;
    },

    // 时间选择（后）
    onConfirmfront2(time) {
      time = new Date(time);
      let date =
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
      this.selectbehind = date;
      this.showPicker2 = false;
    },
    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-team {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .team-box {
    .selecttime {
      display: flex;
      margin: 20px auto;
      width: 375px;
      .selectfrontbox {
        width: 115px;
        height: 35px;
        background-color: #e5e5e5;
        border-radius: 10px;
        margin-left: 15px;
        color: #777;
        font-size: 12px;
        line-height: 35px;
        text-align: center;
      }
      .selectto {
        height: 35px;
        margin-left: 5px;
        line-height: 35px;
        align-items: center;
        color: #777;
      }
      .selectbehindbox {
        width: 115px;
        height: 35px;
        background-color: #e5e5e5;
        border-radius: 10px;
        margin-left: 5px;
        color: #777;
        font-size: 12px;
        line-height: 35px;
        text-align: center;
      }
      .search {
        width: 80px;
        height: 35px;
        background-color: #f60;
        border-radius: 20px;
        margin-left: 10px;
        color: #fff;
        font-size: 14px;
        line-height: 35px;
        text-align: center;
      }
    }
    .select {
      font-size: 12px;
      color: #333;
      display: flex;
      .select-left {
        width: 50%;
        .select-money {
          margin: 10px;
          margin-left: 20px;
        }
        .select-first {
          margin: 10px;
          margin-left: 20px;
        }
        .select-people {
          margin: 10px;
          margin-left: 20px;
        }
      }
      .select-right {
        width: 50%;
        .select-commission {
          margin: 10px;
        }
        .select-direct {
          margin: 10px;
        }
        .select-today {
          margin: 10px;
        }
      }
    }
    .segmentation {
      border: #e5e5e5 1px solid;
      width: 340px;
      margin: 10px auto;
    }
  }

  /deep/.van-tabs__line{
        width: 20px;
    height: 3px;
    background-color: #00abff;
  }
  /deep/.van-tab--active{
    color: #00abff;
  }
}
</style>
